<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传服务</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            font-size: 2.2em;
            margin-bottom: 10px;
        }
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        .content {
            padding: 40px;
        }
        .upload-section {
            margin-bottom: 30px;
            padding: 30px;
            border: 2px dashed #667eea;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
        }
        .upload-section:hover {
            border-color: #764ba2;
            background: #f8f9ff;
        }
        .upload-section.dragover {
            border-color: #764ba2;
            background: #f0f2ff;
            transform: scale(1.02);
        }
        .upload-section h3 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.4em;
        }
        .file-input {
            display: none;
        }
        .upload-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 10px;
        }
        .upload-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }
        .upload-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        .file-info {
            margin: 20px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            display: none;
        }
        .file-info.show {
            display: block;
        }
        .file-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .file-size {
            color: #666;
            font-size: 0.9em;
        }
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e1e5e9;
            border-radius: 4px;
            overflow: hidden;
            margin: 15px 0;
            display: none;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            width: 0%;
            transition: width 0.3s ease;
        }
        .status {
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            font-weight: 600;
            display: none;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .result-section {
            margin-top: 30px;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 15px;
            display: none;
        }
        .result-section.show {
            display: block;
        }
        .result-url {
            word-break: break-all;
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e1e5e9;
            margin: 15px 0;
        }
        .copy-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin-left: 10px;
        }
        .copy-btn:hover {
            background: #218838;
        }
        .preview {
            margin-top: 20px;
            text-align: center;
        }
        .preview img {
            max-width: 300px;
            max-height: 200px;
            border-radius: 8px;
            border: 1px solid #eee;
        }
        .preview audio {
            width: 300px;
        }
        @media (max-width: 768px) {
            .content { padding: 20px; }
            .header h1 { font-size: 2em; }
            .upload-section { padding: 20px; }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>📁 文件上传服务</h1>
        <p>将本地图片和音频文件上传到远程服务器</p>
    </div>
    <div class="content">
        <!-- 图片上传 -->
        <div class="upload-section" id="imageUploadSection">
            <h3>🖼️ 图片上传</h3>
            <p>支持格式：JPG, JPEG, PNG, BMP, WEBP（最大10MB）</p>
            <input type="file" id="imageFile" class="file-input" accept="image/*">
            <button class="upload-btn" onclick="document.getElementById('imageFile').click()">选择图片文件</button>
            <button class="upload-btn" id="uploadImageBtn" onclick="uploadImage()" disabled>上传图片</button>
            
            <div class="file-info" id="imageFileInfo">
                <div class="file-name" id="imageFileName"></div>
                <div class="file-size" id="imageFileSize"></div>
            </div>
            
            <div class="progress-bar" id="imageProgressBar">
                <div class="progress-fill" id="imageProgressFill"></div>
            </div>
        </div>

        <!-- 音频上传 -->
        <div class="upload-section" id="audioUploadSection">
            <h3>🎵 音频上传</h3>
            <p>支持格式：MP3, WAV, OGG, AAC（最大15MB）</p>
            <input type="file" id="audioFile" class="file-input" accept="audio/*">
            <button class="upload-btn" onclick="document.getElementById('audioFile').click()">选择音频文件</button>
            <button class="upload-btn" id="uploadAudioBtn" onclick="uploadAudio()" disabled>上传音频</button>
            
            <div class="file-info" id="audioFileInfo">
                <div class="file-name" id="audioFileName"></div>
                <div class="file-size" id="audioFileSize"></div>
            </div>
            
            <div class="progress-bar" id="audioProgressBar">
                <div class="progress-fill" id="audioProgressFill"></div>
            </div>
        </div>

        <!-- 状态显示 -->
        <div id="status" class="status"></div>

        <!-- 结果显示 -->
        <div class="result-section" id="resultSection">
            <h3>✅ 上传成功</h3>
            <div>
                <strong>文件URL：</strong>
                <div class="result-url" id="resultUrl"></div>
                <button class="copy-btn" onclick="copyUrl()">复制URL</button>
            </div>
            <div class="preview" id="preview"></div>
        </div>
    </div>
</div>

<script>
// 文件选择处理
document.getElementById('imageFile').addEventListener('change', function(e) {
    handleFileSelect(e.target.files[0], 'image');
});

document.getElementById('audioFile').addEventListener('change', function(e) {
    handleFileSelect(e.target.files[0], 'audio');
});

function handleFileSelect(file, type) {
    if (!file) return;
    
    const fileInfo = document.getElementById(type + 'FileInfo');
    const fileName = document.getElementById(type + 'FileName');
    const fileSize = document.getElementById(type + 'FileSize');
    const uploadBtn = document.getElementById('upload' + type.charAt(0).toUpperCase() + type.slice(1) + 'Btn');
    
    // 显示文件信息
    fileName.textContent = file.name;
    fileSize.textContent = formatFileSize(file.size);
    fileInfo.classList.add('show');
    uploadBtn.disabled = false;
    
    // 隐藏之前的结果
    hideResult();
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// 上传图片
async function uploadImage() {
    const file = document.getElementById('imageFile').files[0];
    if (!file) return;
    
    await uploadFile(file, '/api/upload/image', 'image');
}

// 上传音频
async function uploadAudio() {
    const file = document.getElementById('audioFile').files[0];
    if (!file) return;
    
    await uploadFile(file, '/api/upload/audio', 'audio');
}

// 通用上传函数
async function uploadFile(file, url, type) {
    const formData = new FormData();
    formData.append('file', file);
    
    const progressBar = document.getElementById(type + 'ProgressBar');
    const progressFill = document.getElementById(type + 'ProgressFill');
    const statusDiv = document.getElementById('status');
    
    // 显示进度条
    progressBar.style.display = 'block';
    statusDiv.style.display = 'block';
    statusDiv.className = 'status info';
    statusDiv.textContent = '正在上传文件...';
    
    try {
        const xhr = new XMLHttpRequest();
        
        // 监听上传进度
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressFill.style.width = percentComplete + '%';
            }
        });
        
        // 监听响应
        xhr.addEventListener('load', function() {
            if (xhr.status === 200) {
                const response = JSON.parse(xhr.responseText);
                if (response.status === 'SUCCESS') {
                    showSuccess(response.url, response.filename, type);
                } else {
                    showError('上传失败：' + response.message);
                }
            } else {
                showError('上传失败：HTTP ' + xhr.status);
            }
        });
        
        xhr.addEventListener('error', function() {
            showError('网络错误，上传失败');
        });
        
        // 发送请求
        xhr.open('POST', url);
        xhr.send(formData);
        
    } catch (error) {
        showError('上传失败：' + error.message);
    }
}

function showSuccess(url, filename, type) {
    const statusDiv = document.getElementById('status');
    const resultSection = document.getElementById('resultSection');
    const resultUrl = document.getElementById('resultUrl');
    const preview = document.getElementById('preview');
    
    statusDiv.className = 'status success';
    statusDiv.textContent = '文件上传成功！';
    
    resultUrl.textContent = url;
    resultSection.classList.add('show');
    
    // 显示预览
    if (type === 'image') {
        preview.innerHTML = `<img src="${url}" alt="图片预览">`;
    } else if (type === 'audio') {
        preview.innerHTML = `<audio src="${url}" controls></audio>`;
    }
}

function showError(message) {
    const statusDiv = document.getElementById('status');
    statusDiv.className = 'status error';
    statusDiv.textContent = message;
}

function hideResult() {
    const resultSection = document.getElementById('resultSection');
    resultSection.classList.remove('show');
}

function copyUrl() {
    const url = document.getElementById('resultUrl').textContent;
    navigator.clipboard.writeText(url).then(function() {
        alert('URL已复制到剪贴板！');
    }).catch(function() {
        // 降级方案
        const textArea = document.createElement('textarea');
        textArea.value = url;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        alert('URL已复制到剪贴板！');
    });
}

// 拖拽上传支持
function setupDragAndDrop() {
    const sections = ['imageUploadSection', 'audioUploadSection'];
    
    sections.forEach(sectionId => {
        const section = document.getElementById(sectionId);
        const type = sectionId.replace('UploadSection', '');
        const fileInput = document.getElementById(type + 'File');
        
        section.addEventListener('dragover', function(e) {
            e.preventDefault();
            section.classList.add('dragover');
        });
        
        section.addEventListener('dragleave', function(e) {
            e.preventDefault();
            section.classList.remove('dragover');
        });
        
        section.addEventListener('drop', function(e) {
            e.preventDefault();
            section.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                fileInput.files = files;
                fileInput.dispatchEvent(new Event('change'));
            }
        });
    });
}

// 初始化拖拽上传
setupDragAndDrop();
</script>
</body>
</html> 